<template>

    <!-- 分类标签 -->
<!--    <div class="nav">
      <div class="product-nav">
        <div class="title">分类</div>
       <el-tabs v-model="activeName" type="card">
          <el-tab-pane
              v-for="item in typeList"
              :key="item.typeId"
              :label="item.typeName"
              :name="''+item.typeId"
          />
        </el-tabs>
      </div>
    </div> -->
    <!-- 分类标签END -->
	<!-- 面包屑 -->
	 <div class="goods" id="goods" name="goods">
<!-- 	<div class="breadcrumb">
	   <el-breadcrumb separator-class="el-icon-arrow-right">
	     <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
	     <el-breadcrumb-item>商品</el-breadcrumb-item>
	    <el-breadcrumb-item v-if="search">搜索</el-breadcrumb-item>
	     <el-breadcrumb-item v-else>分类</el-breadcrumb-item>
	     <el-breadcrumb-item v-if="search">{{ search }}</el-breadcrumb-item>
	   </el-breadcrumb>
	 </div> -->
	 <!-- 面包屑END -->
    <div  style="margin-left: 90px"></div>
    <el-row >
	<el-row >
	<el-col v-for="item in showList" :key="item.productId" :span="6">
	<router-link :to="{ path: '/goods/detail', query: {productId:item.productId} }">
    <el-card class="cards">
      <!-- 商品主图 -->
      <template #header>
        <img src="../assets/images/flower.jpg" style="height:200px;width: 200px;cover;margin-left: 30px"/>
      </template>
      <!-- 商品信息 -->
      <div>
        <el-text line-clamp="1" :show-overflow-tooltip="true">
		<div style="font-size: 20px;text-align: center;font-weight: bold" >{{ item.productName }}</div>
		</el-text>
		<el-text>
		<div style="font-size: 14px" >销量{{ item.productSale }}</div>
		<span>库存{{ item.productTotal }}</span>
		</el-text>
		<div style="color: gray; font-size: 20px; margin-top: 10px;">原价¥{{ item.originalPrice.toFixed(2)}}</div>
		<div style="color:#FF8C00; font-size: 24px; margin-top: 10px;">
			<span>秒杀价￥</span>
			<span style="font-size: 28px;text-align: center;font-weight: bold" >{{ item.productNowPrice.toFixed(2) }}</span>
		</div>
      </div>
      <!-- 商品描述 -->
      <template #footer>
        <el-text line-clamp="2">
          <el-tag type="primary" >描述:</el-tag>
          <div :show-overflow-tooltip="true">{{ item.description }}</div>
        </el-text>
      </template>

    </el-card>	  </router-link>
  </el-col>
  <!-- 占位符 -->
  <el-col :span="8" v-if="showList.length < 3"></el-col>
</el-row>
</el-row>
	<div class="pagination">
				   <el-pagination  small background layout="total,prev, pager, next"
					:total="totalItems"
					:page-size="pageSize"
					v-model:current-page="currentPage"
					@current-change="handleCurrentChange"
					style="margin-top: 20px;margin-left: 40%;" />
			</div>
</div>
		
</template>  
<script setup lang="ts">
import { onMounted, ref } from "vue";
import {getAllGoods,getTypeGoods} from "@/api/goods"
import router from "@/router/index";
import TypeView from "./TypeView.vue"
import GoodsList from"@/components/GoodsList.vue"
 import { useRoute } from 'vue-router'
	  
const route = useRoute()//路由
const pageSize = ref(1)//页面大小初始化
const dataList=ref([])//取到的结果
const showList=ref([])//分页展示列
const keyWord=ref('')//搜索关键词，待开发
const currentPage = ref(1)//当前页
const totalItems = ref(1)//总条数

const page = ref({//配置对应的查询参数
      pageNum: 1,
      pageSize: 30,
    });
const tpage = ref({//配置对应的查询参数
		  typeId: 0,
	      pageNum: 1,
	      pageSize: 30,
	    });
	
//-------------------------判断是否取到type参数----------------------
	  let tId=route.query.typeId;
	  console.log('进入页面');
	  getData(page);
//-------------------------页数改变----------------------
		const handleCurrentChange = (val: number) => {
		  console.log(`current page: ${val}`)
		  page.value.pageNum = val
		   console.log(page)
		   		   getData(page);
		  }

//-------------------------取请求结果----------------------
	function getData(p){
		//调用 {getAllGoods} from "@/api/goods"
		getAllGoods(p).then((res) => {
		console.log("页面查询结果",res)
		 dataList.value = res.data.list
		 console.log("dataList",dataList.value)
		 showList.value = dataList.value
		 console.log("showList",showList.value)
		 // navigatePages
		 totalItems.value=res.data.total
		 currentPage.value = res.data.pageNum
		 pageSize.value = res.data.pageSize
		  console.log("pagesize",pageSize.value)
		 console.log("current",currentPage.value)
		 })
		 }
		// const fillist=watch(showList,keyWord)=>{
		//      // 返回过滤后的数组
		// 	 const key = keyWord.value;
		// 	 console.log("key=========",key)
		//      showList.value.filter((p) => {
		// 		 console.log(p.noticeTitle.indexOf(key))
		// 		 return p..indexOf(key) !==-1
		// 	 });
		//    }
		
	
</script>
<style>
.goods {
  background-color: #f5f5f5;
}

/* 面包屑CSS */
.el-tabs--card .el-tabs__header {
  border-bottom: none;
}

.goods .breadcrumb {
  height: 50px;
  background-color: white;
}

.goods .breadcrumb .el-breadcrumb {
  width: 1225px;
  line-height: 30px;
  font-size: 16px;
  margin: 0 auto;
}

/* 面包屑CSS END */

/* 分类标签CSS */
.goods .nav {
  background-color: white;
}

.goods .nav .product-nav {
  width: 1225px;
  height: 40px;
  line-height: 40px;
  margin-left: 200px;
}

.nav .product-nav .title {
  width: 50px;
  font-size: 16px;
  font-weight: 700;
  float: left;
}

/* 分类标签CSS END，价格样式开始 */
.price-container {
    margin-top: 10px;
}

.original-price {
    color: grey;
    font-size: 24px;
    text-decoration: line-through;
}

.original-price span {
    text-decoration: line-through;
}

.seckill-price {
    color: orangered;
    font-size: 24px;
}

.seckill-price span {
    font-weight: bold;
    font-size: 28px; /* 或者按照你的设计需要来放大数字 */
}

/* 如果你确实在使用Vue和ElementPlus，你可能需要在单文件组件的<style>块中包含这个样式 */
.cards {
	width: 300px; margin: 20px;
}

.cards:hover {
	background-color: #f8dcbc;
	opacity: 0.85;
	border-color: #ffaa00;
	}

</style>